<template>
  <div class="hm-article">
    <div class="top">
      <div class="left">
        <router-link
          to="/layout/article/tuijian"
          style="margin-right: 20px; padding-bottom: 25px"
          >推荐</router-link
        >
        <router-link to="/layout/article/new" style="padding-bottom: 25px"
          >最新</router-link
        >
      </div>
      <div class="right">
        <img src="@/assets/logo1.png" alt="" />
      </div>
    </div>
    <!-- <div class="list">
      <div
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="$router.push({ path: '/detail/' + item.id })"
      >
        <div class="top2">
          <img :src="item.avatar" alt="" />
          <div class="right">
            <div class="title">{{ item.stem }}</div>
            <div class="username">
              <span>{{ item.creator }}</span>
              <span> | </span>
              <span>{{ item.createdAt }}</span>
            </div>
          </div>
        </div>
        <div class="middle">
          {{ removeHtmlTags(item.content) }}
        </div>
        <div class="bottom">
          <span>点赞 {{ item.likeCount }}</span>
          <span> | </span>
          <span>浏览 {{ item.views }}</span>
        </div>
      </div>
    </div> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import axios from "axios";

export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    // this.getList();
    //  console.log(localStorage.getItem("token") )
  },
//   methods: {
//     async getList() {
//       const res = await axios({
//         url: "http://interview-api-t.itheima.net/h5/interview/query",
//         method: "get",
//         params: { current: 1, pageSize: 10 },
//         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
//       });
//       // console.log(res)
//       this.list = res.data.data.rows;
//     },
//     removeHtmlTags(html) {
//       return html.replace(/<[^>]*>/g, "");
//     },
//   },
};
</script>

<style lang="less" scoped>
.hm-article {
    position: relative;
  .top {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 5px 0;
    position: fixed;
    top: 0;
    left: 0;
      background-color: #fff;
    border-bottom: 1px solid #ebedf0;

    .left {
      flex: 1;
      font-size: 20px;
      a {
        text-decoration: none;
      }
      a.active {
        color: orange;
        border-bottom: 2px solid #000;
      }
    }
    .right {
      width: 64px;
      height: 28px;
      padding-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
 
}
</style>
